<script lang="ts" setup>
import Plate from "./Plate.vue";
import ProTable from "@/components/ProTable/ProTable.vue";
import { ref, reactive, onBeforeMount, onMounted, computed } from "vue";
import { get } from "@/api/http";
const columns = [
  {
    label: "时间",
    prop: "date",
    align: "left",
    width: 200,
  },

  {
    label: "信息",
    prop: "info",
    align: "left",
  },
];
const tableData = ref([
  {
    date: "2023年03月07日 14:02:29",
    info: "菲律宾棉兰老岛发生5.9级地震",
  },
  {
    date: "2023年03月07日 14:02:29",
    info: "菲律宾棉兰老岛发生5.9级地震",
  },
]);

onBeforeMount(async () => {
  const { data } = await get("/Cockpit/getEqInfo");
  tableData.value = data;
  // console.log(data);
});

const inner = ref();

const top = ref(0);
const topY = computed(() => top.value + "px");
const timer = setInterval(() => {
  top.value--;
  if (top.value <= -200) {
    top.value = 0;
    // inner.value.style
    // clearInterval(timer);
  }
}, 100);

const showList = ref(false);
</script>

<template>
  <Plate title="速报信息">
    <!-- <div class="viewBox"> -->
    <div class="warper p-l-30px">
      <div class="inner" v-for="(item, index) in tableData" :key="index">
        <p>{{ item.date + item.info }}</p>
      </div>
      <!-- <div class="inner" v-for="(item, index) in tableData" :key="index">
        <p>{{ item.date + item.info }}</p>
      </div> -->
      <!-- </div> -->
    </div>

    <!-- <ProTable 
      :hieddenHeader="true"
      :scroll="{ y: 130 }"
      :data="tableData"
      :columns="columns"
    ></ProTable> -->
  </Plate>
</template>

<style lang="less" scoped>
.viewBox {
  // height: 200px;
  // overflow: hidden;
  // position: relative;

  .warper {
    height: 200px;
    overflow: hidden;
    position: relative;
    // transform: translateY(v-bind(topY));
    // position: absolute;
    width: 100%;
    .inner {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      transform: translateY(v-bind(topY));
      &:nth-child(odd) {
        background-color: rgba(12, 104, 168, 0.6);
      }
    }
  }
}
.warper {
  height: 200px;
  overflow: hidden;
  position: relative;
  // transform: translateY(v-bind(topY));
  // position: absolute;
  width: 100%;
  .inner {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    transform: translateY(v-bind(topY));
    &:nth-child(odd) {
      background-color: rgba(12, 104, 168, 0.1);
    }
  }
}
</style>
